/* eslint-disable @typescript-eslint/no-unused-vars */
import * as path from 'path';
import { promises as fs } from 'fs';
import { defineConfig, externalizeDepsPlugin, loadEnv } from 'electron-vite';
import vue from '@vitejs/plugin-vue';
// import vueJsx from '@vitejs/plugin-vue-jsx';
// import { ViteEjsPlugin } from 'vite-plugin-ejs';
import Components from 'unplugin-vue-components/vite';
import iconsResolver from 'unplugin-icons/resolver';
import iconsPlugin from 'unplugin-icons/vite';
import svgLoader from 'vite-svg-loader';
import { SVG, cleanupSVG, runSVGO } from '@iconify/tools';
import { platform } from './src/common/utils';
import { viteInjectAppLoadingPlugin } from './build/vite/plugins/inject-app-loading';

function resolve(url = '', ...args: string[]) {
  return path.resolve(__dirname, url, ...args);
}

export default defineConfig(async ({ command, mode }) => {
  const env = loadEnv(mode, process.cwd()) as unknown as ViteEnv;
  const { Icons, IconsResolver } = unpluginIconsPlugin();
  return {
    main: {
      root: '.',
      build: {
        rollupOptions: {
          input: resolve('./src/main/app.ts')
        }
      },
      plugins: [externalizeDepsPlugin()],
      resolve: {
        alias: {
          $main: resolve('./src/main'),
          '#common': resolve('./src/common'),
          resources: resolve('./resources')
        }
      },
      define: {
        'process.env.command': JSON.stringify(command),
        'process.env.mode': JSON.stringify(mode)
      }
    },
    preload: {
      root: '.',
      build: {
        rollupOptions: {
          input: resolve('./src/preload/index.ts')
        }
      },
      plugins: [externalizeDepsPlugin()],
      resolve: {
        alias: {
          $main: resolve('./src/main'),
          '#common': resolve('./src/common'),
          $preload: resolve('./src/preload')
        }
      },
      define: {
        'process.env.command': JSON.stringify(command),
        'process.env.mode': JSON.stringify(mode)
      }
    },
    renderer: {
      /**
       * https://github.com/alex8088/electron-vite/issues/86
       * http://events.jianshu.io/p/2f10fd08bbf4
       */
      root: resolve('./src/renderer'),
      build: {
        rollupOptions: {
          input: {
            main: resolve('./src/renderer/index.html')
          }
        }
      },
      plugins: [
        vue({
          template: {
            compilerOptions: {
              isCustomElement: (tag) => {
                return ['webview'].includes(tag);
              }
            }
          },
          /**
           * vue 3.3版本中新增了对 defineOptions 的支持
           */
          script: {
            /**
             * 实验性语法支持：https://github.com/vuejs/rfcs/discussions/502
             * 开启 解构的 props 并保持响应性，并支持解构的方式设置别名及默认值
             */
            propsDestructure: true
          }
        }),
        //vueJsx({
        // exclude: [
        //   '**/chat-message/shared/components/editor/**/*.tsx',
        //   '**/chat-message/shared/components/editor/**/*.ts',
        // ],
        //}),
        // https://blog.csdn.net/CRMEB/article/details/123245221
        Components({
          dts: resolve('./typings/autoimport-components.d.ts'),
          resolvers: [IconsResolver()]
        }),
        Icons(),
        svgLoader({
          svgo: false,
          defaultImport: 'url'
        }),
        await viteInjectAppLoadingPlugin()
      ],
      resolve: {
        alias: {
          '@': resolve('./src/renderer'),
          '@view': resolve('./src/renderer/view'),
          '@shared': resolve('./src/renderer/shared'),
          '#common': resolve('./src/common'),
          '@main': resolve('./src/renderer/view/main')
        }
      },
      server: {
        port: 8100,
        host: true,
        open: false
      },
      css: {
        devSourcemap: true,
        preprocessorOptions: {
          less: {
            javascriptEnabled: true,
            additionalData: `@import '@shared/styles/var/var.less';`
          }
        }
      },
      define: {
        'process.env.command': JSON.stringify(command),
        'process.env.mode': JSON.stringify(mode)
      }
    }
  };
});

function unpluginIconsPlugin() {
  /**
   * https://github.com/svg/svgo
   * https://github1s.com/iconify/tools/blob/main/@iconify-demo/unplugin-svelte/vite.config.js
   * https://docs.iconify.design/articles/cleaning-up-icons/
   */
  const baseIconsPath = './src/renderer/shared/assets/icons';
  return {
    IconsResolver: () =>
      iconsResolver({
        prefix: 'icon',
        alias: {
          // 如果集合的名称比较长，我们可以定义集合的别名
          // svg: 'shared-app-svg',
          // 'fill-svg': 'shared-app-fill-svg',
        },
        // 写入自定义的icons集合名
        // customCollections: ['shared-app-svg-icon', 'shared-app-fill-svg-icon'],
        customCollections: ['svg', 'fill-svg']
      }),
    Icons: () =>
      iconsPlugin({
        compiler: 'vue3',
        autoInstall: false,
        // 自定义图标加载
        customCollections: {
          svg: async (name) => {
            const path = resolve(baseIconsPath, './svg');
            const filename = `${path}/${name}.svg`;
            const content = await fs.readFile(filename, 'utf-8');
            const svg = new SVG(content);
            cleanupSVG(svg);
            // 制作成纯色图标
            runSVGO(svg, {
              plugins: [
                {
                  name: 'preset-default',
                  params: {
                    overrides: {
                      removeViewBox: false,
                      convertColors: {
                        currentColor: true
                      }
                    }
                  }
                },
                {
                  name: 'addClassesToSVGElement',
                  params: {
                    classNames: ['svg-icon']
                  }
                }
              ]
            });
            return svg.toMinifiedString({ width: '1em', height: '1em' });
          },
          'fill-svg': async (name) => {
            const path = resolve(baseIconsPath, './fill-svg');
            const filename = `${path}/${name}.svg`;
            const content = await fs.readFile(filename, 'utf-8');
            const svg = new SVG(content);
            cleanupSVG(svg);
            // 制作成纯色图标
            runSVGO(svg, {
              plugins: [
                { name: 'preset-default' },
                {
                  name: 'addClassesToSVGElement',
                  params: {
                    classNames: ['svg-icon']
                  }
                }
              ]
            });
            return svg.toMinifiedString({ width: '1em', height: '1em' });
          }
        }
      })
  };
}
